<!--20210304    zaq    创建vue文件-->
<!--20210309    zaq    实现基本界面，新建data,method框架-->


<template>
<!--新增一条收支记录-->
  <div class="insert_list">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="金额" >
        <el-input v-model="form.count" style="width: 230px"></el-input>*
      </el-form-item>

      <el-form-item label="时间">
        <!--        <el-col :span="11">-->
        <!--          <el-date-picker type="date" placeholder="选择日期" v-model="form.outputDate" style="width: 230px;"></el-date-picker>-->
        <!--        </el-col>-->
        <!--        <el-col class="line" :span="2">-</el-col>-->
        <!--        <el-col :span="11">-->
        <!--          <el-time-picker placeholder="选择时间" v-model="time" style="width: 100%;"></el-time-picker>-->
        <!--        </el-col>-->
        <el-date-picker
            v-model="form.date"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
            :picker-options="pickerOptions">
        </el-date-picker>*
      </el-form-item>


      <el-form-item label="种类">
        <el-select
            v-model="form.kind"
            placeholder="请选择种类"
        >
          <el-option
              v-for="kind in kinds"
              :key="kind.kindName"
              :label="kind.kindName"
              :value="kind.kindName"></el-option>
        </el-select>*
        <el-switch
            v-model="flag"
            active-text="收入"
            active-value="1"
            inactive-text="支出"
            inactive-value="2"
            @change="getFlag($event)"
        ></el-switch>
      </el-form-item>

      <el-form-item label="支付方式">
        <el-select v-model="form.method" placeholder="请选择支付方式" @change="getMethod">
          <el-option label="现金" value="现金"></el-option>
          <el-option label="微信" value="微信"></el-option>
          <el-option label="支付宝" value="支付宝"></el-option>
          <el-option label="花呗" value="花呗"></el-option>
        </el-select>*


      </el-form-item>

      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.text" style="width: 230px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insertOutput">提交</el-button>
        <router-link to="/output"> <el-button>取消</el-button> </router-link>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
export default {
  name: "Input_list",
  data(){
    return {
      kinds:'',
      pay:'',
      flag:2,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },//时间快捷选项
      time:'',
      form: {
        count:'',
        date:'',
        id:1,
        kind:'',
        method:'',
        text:'',
        flag:'2'
      },
    }
  },
  methods:{
    getFlag(){
      let flag=this.flag.valueOf()
      if(flag==1){
        console.log('收入')
        this.form.flag=2
      }else {
        console.log('支出')
        this.form.flag=1
      }
      const _this=this;
      //根据收入/支出选择支付用途选项
      // axios.get('http://localhost:9090/kind/findAll/'+flag).then(function (resp){
      //   let jsonObj = JSON.parse(JSON.stringify(resp.data));
      //   console.log(jsonObj)
      //   _this.kinds=resp.data;
      // })
      _this.form.kind=''
    },
    insertOutput() {
      let input = this.form
      let commit = 0//判断是否能提交
      let msg = ''
      if (input.kind == null || input.kind === "") {
        commit = 1
        msg = msg + "种类  "
      }
      if (input.count == null || input.count === "") {
        commit = 1
        msg = msg + "金额  "
      }
      if (input.date == null || input.date === "") {
        commit = 1
        msg = msg + "时间  "
      }
      if (input.method == null || input.method === "") {
        commit = 1
        msg = msg + "支付方式  "
      }
      if (commit === 1) {
        this.$alert('傻逼东西,该填不填:' + msg, '错误!!!', {
          confirmButtonText: '知道了',
          callback: action => {
            this.$message({
              type: 'info',
              message: `记得填`
            });
          }
        });
      }
      //提交
      // if(commit==0){
      //   axios({
      //     url: "http://localhost:9090/bookkeeping/insert",
      //     data: this.form,
      //     method:'post',
      //   })
      //       .then(function (resp){
      //         console.log(resp)
      //       })
      //       .catch(function (error){
      //         console.log(error)
      //       })
      // }
    }
  }
}
</script>

<style scoped>
.insert_list{
  text-align: left;
}
</style>